<template>
	<view class="" :style="$theme.pageStyle">
		<gb-tab :tabBarArr="tabList" :tabIndex="tabIndex" @tabtap="tabtap" style="position:sticky;"></gb-tab>
		
		
		<view style="margin-top: 150px;" v-if="DataList.length == 0">
			<u-empty
			        mode="data"
			        text="暂无订单数据"
			>
			</u-empty>
		</view>	
		
		
		<view class="" v-if="tabIndex != 4">
			<view v-for="(item , index) in DataList" :key="index">
				<view class="tonggao_item" @click="Tourl('/order/consult/detail?id=' + item.id )">
					<view class="tonggao_title flsk">
						<view class="tg_title_text fl-g1">
							订单号: {{item.sn}}
						</view>
						<view>
							<view class="tg_price">
							<span style="font-size: 12px;margin-right: 5px;">¥</span> {{item.order_amount}}
							</view>
						</view>
					</view>
					<view class="tg_content">
						<view class="tg_content_item flex jsbt w100">
							<view class="tg_content_img">
								<image :src="item.avatar" mode="aspectFill" v-if="item.real_name"></image>
								<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/511710885111bkUHfy.png" mode="aspectFill" v-else></image>
							</view>
							<view class="tg_content_text">
								<view class="text_box u-line-1">
									订单类型：
									<span v-if="item.type == 1">
										<uni-icons type="chatbubble" size="16" style="margin-right: 5px;"></uni-icons>
										图文咨询
									</span>
									<span v-else-if="item.type == 2">
										<uni-icons type="phone" size="16" style="margin-right: 5px;"></uni-icons>
										电话咨询
										</span>
									<span v-else>
										<uni-icons type="videocam" size="16" style="margin-right: 5px;"></uni-icons>
										视频咨询
										</span>
								</view>
								<view class="text_box u-line-1">
									下单时间：{{item.add_time}}
								</view>
								<view class="text_box u-line-2">
									支付方式：<span> 
									{{item.pay_way.name}}
									</span>
								</view>
								
							</view>

						</view>
					</view>
					<view class="tg_user flex jsbt w100">
						<view class="tg_user_flex" v-if="item.real_name">
							<view class="tg_avatar">
								<image :src="item.avatar" mode="aspectFill"></image>
							</view>
							<p>{{item.real_name}}律师</p>
						</view>
						<view class="tg_user_flex" v-else>
							<p>还没有律师接单</p>
						</view>
						<view class="tg_add_flex">
							<u-tag text="未支付" type="warning" size="mini" plain plainFill v-if="item.pay_status == 0"></u-tag>
							<u-tag text="已支付" type="success" size="mini" plain plainFill v-else-if="item.pay_status == 1"></u-tag>
							<u-tag text="已退款" type="error" size="mini" plain plainFill v-else></u-tag>
						</view>
						<view class="tg_add_flex" style="margin-left: 10px;">
							<!-- -1取消，0下单，1服务中 , 2已完成，3已取消  -->
							<u-tag text="进行中" type="warning" size="mini" plain plainFill v-if="item.status == 1"></u-tag>
							<u-tag text="已完成" type="success" size="mini" plain plainFill v-else-if="item.status == 3"></u-tag>
							<u-tag text="已取消" type="error" size="mini" plain plainFill v-else-if="item.status == 9"></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="padding" v-else>
			<view class="cu-list menu-avatar comment">
				<block v-for="(item,index) in DataList" :key="index">
					<view class="cu-item margin-bottom radius-xl">
						<view class="cu-avatar round" :style="{backgroundImage: 'url('+item.avatar+')'}"></view>				
						<view class="content">
							<view class="nickNameandTime">
								<view class="nickBox crow">
									<view class="text-black nickName">{{item.real_name}}</view>
									<view class="text-gray text-sm">{{item.create_time}}</view>
								</view>							
							</view>
							<view class="text-sm score">
								<text class="cuIcon-favorfill text-orange padding-left-mn" v-for="(it,indexs) in item.count_number" :key="indexs"></text>
							</view>
							<view class="text-gray text-content text-df">
								{{item.content}}
							</view>
							<view class="tag flex flex-wrap padding-top-xs">
								
							</view>
							<view class="crow margin-top-sm text-sm" v-if="item.rep == 1">
								<text>回复：</text>
								<text class="text-gray">{{item.commonts}}</text>
							</view>
							
							<view class="grid flex-sub col-3 grid-square padding-top-sm">
								<view class="bg-img" :style="'background-image:url(' + its + ')'" v-for="(its,indexss) in item.imglist"
									:key="indexss">
								</view>
							</view>
							
						</view>						
					</view>										
				</block>				
			</view>
		</view>
		
		
		<view style="height: 50px;">
			
		</view>

	</view>

</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				DataList: [],
				scrollTop: 0,
				tabList: [{
						name: '全部'
					},
					{
						name: '进行中'
					},
					{
						name: '已取消'
					},
					{
						name: '已完成'
					},
					{
						name: '评价'
					}
				],
				tabIndex: '',
			}
		},
		onLoad(opt) {
			this.tabIndex = Number(opt.tab)
			this.timeer()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			// tabbar点击事件
			tabtap(index) {
				if (this.tabIndex != index) {
					this.DataList = [];
					this.tabIndex = index;
					this.timeer()
				}
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('user/consultOrder', {
						'page': page,
						'limit': this.limit,
						'index': this.tabIndex
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			Tourl(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	
	
	.comment .content .nickBox{
	    width: 100%;
	    justify-content: space-between;
	}

	.crow {
	    display: flex;
	    align-items: center;
	}
	
	
	.tonggao_item {
		box-sizing: border-box;
		padding: 10px;
		border-radius: 10px;
		display: block;
		margin-bottom: 20px;
		background-color: #FFFFFF;
		margin: 15px;
		position: relative;
	}

	.flsk {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
	}

	.tg_content {
		background: #f8f8f8;
		border-radius: 10px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
	}


	.tg_title_text {
		color: #191919;
		font-weight: 500;
		height: 25px;
		line-height: 25px;
		display: flex;
		.tg_title_images {
			image {
				width: 20px;
				height: 20px;
				border-radius: 5px;
				margin-right: 5px;
				margin-top: 2.5px;
			}
		}
	}

	.fl-g1 {
		flex-grow: 1;
	}

	.tg_price {
		color: #FF5151;
		font-size: 22px;
		font-weight: 600;
		margin-right: 10px;
	}

	.tg_user_flex {
		display: flex;
		width: 70%;
	}

	.tg_add_flex {
		display: flex;
		line-height: 20px;
	}

	.tg_user {
		color: #666666;
		font-size: 12px;
	}

	.tg_avatar image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8px;
		border-radius: 50%;
	}

	.icon_realname image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 50%;
	}

	.icon_address image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8px;
		border-radius: 50%;
	}

	.tg_user_line {
		width: 1px;
		height: 15px;
		margin: 0 6px;
		background-color: #696969;
	}

	.tg_item_bottom {
		margin-top: 10px;
		margin-bottom: 10px;
		border-top: 1px solid #F1F1F1;
		color: #696969;
		font-size: 12px;
	}

	.tg_content_item {
		padding: 10px 0px 10px 0px;
	}

	.tg_content_text {
		width: 70%;

		.text_box {
			font-size: 14px;
			color: #666666;
		}
	}

	.tg_content_img {

		// width: 20%;
		image {
			width: 80px;
			height: 80px;
			border-radius: 8px;
		}
	}

	.text_box {
		color: #666666;
	}


	.fixedbotto {
		display: flex;
		position: fixed;
		top: 88px;
		left: 0;
		width: 100%;
		background: #FFF;
		z-index: 99;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
	}

	.address_select {
		background: rgba(0, 0, 0, 0.1);
		padding: 5px 10px 5px 10px;
		border-radius: 20px;
	}

	.flex {
		display: flex;
	}

	.jsbt {
		justify-content: space-between;
	}

	.w100 {
		width: 100%;
	}

	.tg_avatar image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8px;
		border-radius: 50%;
	}
</style>